<template>
    <div>
        <n-modal  v-model:show="$props.SkuShow"
            :mask-closable="false"
            @positive-click="uploadShow=false"
            @negative-click="uploadShow=false"
            >
            <div class="modalBg" >
                <div style=" border-bottom: 1px solid #ccc;
                    display: flex;
                    align-items: center;
                    width: 100%;
                    padding: 16px 0;
                    height: 52px;
                    font-size:16px;
                    font-weight:500;
                    color: rgba(0, 0, 0, 0.898);
                    justify-content: left;">
                    <span style="position:relative;left:16px">{{$props.title}}</span>
                    
                </div>
                <div style="padding:16px 24px;overflow-y: auto;" :style="{'height':height,'width':width,'overflowY':'auto'}">
                    <slot name="content"></slot>
                </div>
                
                <div v-if="closeText || confirmText" class="Editorfloot">
                    <n-button v-if="closeText" @click="closeDodal"> {{$props.closeText}} </n-button>
                    <n-button v-if="confirmText" @click="confirmDodal" type="primary">
                    {{ $props.confirmText }}
                    </n-button>
                </div>
            </div>
        </n-modal>
    </div>
</template>

<script setup lang="ts">

const $emit = defineEmits(["close","confirm"])
// const $props = defineProps(["value","token","Image"])

const $props = defineProps({
  title: {
    type: String,
    default: '我是个弹窗',
  },
  SkuShow:{
    type:Boolean,
    default:false
  },
  Overflow:{
    type:Boolean,
    default:false
  },
  height:{
    type: String,
    default: '600px',
  },
  width:{
    type: String,
    default: '1000px',
  },
  closeText:{
    type: String,
    default: '取消',
  },
    confirmText:{
    type: String,
    default: '确定',
  }

})

const closeDodal = () =>{
    console.log(12312)
    $emit("close", true)
}

const confirmDodal = () =>{
    console.log(12312)
    $emit('confirm',false)
}

</script>

<style scoped>
    .modalBg{
        background: white;
        border-radius: 6px;
    }
    .Editorfloot{
        border-top: 1px solid #ccc;
        display: flex;
        align-items: center;
        width: 100%;
        gap: 20px;
        padding: 16px 0;
        justify-content: center;
        /* padding-top: 25px; */
        /* margin-top:25px; */
    }
    .Editorheader{
        border-bottom: 1px solid #ccc;
        display: flex;
        align-items: center;
        width: 100%;
        padding: 16px 0;
        height: 52px;
        justify-content: center;
    }
</style>